<template>
    <el-card class="form-card">
        <div slot="header" style="font-size: 20px">
            <!-- 导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/queryRoleByCondition' }">角色管理</el-breadcrumb-item>
                <el-breadcrumb-item>编辑角色</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 导航 -->
        </div>
        <!-- 新增表单 -->
        <el-form style="height: 100%;" ref="form" :model="form" label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="角色名称：">
                        <el-input v-model="form.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色代号：">
                        <el-input v-model="form.roleNo"></el-input>
                    </el-form-item>
                    <el-form-item label="排序：">
                        <el-input type="number" v-model="form.roleSort"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述：">
                        <el-input type="textarea" v-model="form.roleDesc" :autosize="{ minRows: 5, maxRows: 7}"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button @click="onBack">返回</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="权限分配：">
                        <el-tree
                            :check-strictly="true"
                            :data="permissions"
                            show-checkbox
                            node-key="permissionId"
                            ref="tree"
                            highlight-current
                            :default-expanded-keys="form.permissionIds"
                            :default-checked-keys="form.permissionIds"
                            :props="treeProps">
                        </el-tree>
                    </el-form-item>
                    <!-- 视图表单 -->
<!--                    <el-form ref="view-form"-->
<!--                             :model="form"-->
<!--                             :rules="valid"-->
<!--                             label-width="120px">-->
<!--                        <el-form-item label="权限名称：" prop="permissionName">-->
<!--                            <el-input v-model="form.permissionName"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="类型：">-->
<!--                            <el-select v-model="form.permissionType" placeholder="请选择权限类型"  disabled>-->
<!--                                <el-option label="菜单" value="菜单"></el-option>-->
<!--                                <el-option label="功能" value="功能"></el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="权限等级：">-->
<!--                            <el-select v-model="form.permissionRank" placeholder="请选择权限等级">-->
<!--                                <el-option v-if="form.permissionType === '菜单'" label="1" value="1"></el-option>-->
<!--                                <el-option v-if="form.permissionType === '菜单'" label="2" value="2"></el-option>-->
<!--                                <el-option v-if="form.permissionType === '功能'" label="3" value="3"></el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="url：">-->
<!--                            <el-input v-model="form.permissionUrl" readonly></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="父类：">-->
<!--                            <el-select v-model="form.parentId" placeholder="请选择父类">-->
<!--                                <el-option-->
<!--                                    v-for="item in parentPermissions"-->
<!--                                    :key="item.permissionId"-->
<!--                                    :label="item.permissionName"-->
<!--                                    :value="item.permissionId">-->
<!--                                </el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item label="说明：">-->
<!--                            <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 7}" v-model="form.permissionDesc"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item>-->
<!--                            <el-button type="primary" @click="onSubmit">保存</el-button>-->
<!--                            <el-button @click="onBack">返回</el-button>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
                    <!-- 视图表单 -->
                </el-col>
            </el-row>
        </el-form>
        <!-- 新增表单 -->
    </el-card>


</template>

<script>
    import {getRoleInfo, queryRoleOfPermission, setPermissionForRole} from "../../../api/role"
    import {queryAllPermissionForRank} from "../../../api/permission"

    export default {
        name: "EditRole",
        data() {
            return {
                form: {
                    roleId: '',
                    roleName: '',
                    roleNo: '',
                    roleDesc: '',
                    roleSort: '',
                    permissionIds: []   // 角色拥有的权限id集合
                },
                permissions: [],   // 所有权限信息
                treeProps: {
                    children: 'children',
                    label: 'permissionName'
                },

            }
        },
        created() {
            this.form.roleId = this.$route.query.roleId
            this.loadRoleInfo()         // 加载角色信息
            this.loadAllPermissions()   // 加载所有权限信息(包含子集)
            this.loadRoleOfPermission() // 加载角色下的权限id
        },
        methods: {
            loadAllPermissions() {
                queryAllPermissionForRank().then(res => {
                    this.permissions = res.data.data
                })
            },
            loadRoleInfo() {
                getRoleInfo({
                    'roleId': this.form.roleId
                }).then(res => {
                    const data = res.data.data
                    this.form.roleName = data.roleName
                    this.form.roleDesc = data.roleDesc
                    this.form.roleNo = data.roleNo
                    this.form.roleSort = data.roleSort
                    this.form.permissionIds = data.permissionIds
                })
            },
            loadRoleOfPermission() {
                queryRoleOfPermission({
                    'roleId': this.form.roleId
                }).then(res => {
                    this.form.permissionIds = res.data.data
                })
            },
            onSubmit() {
                this.getCheckedKeys()
                setPermissionForRole({
                    'roleId': this.form.roleId,
                    'roleName': this.form.roleName,
                    'roleNo': this.form.roleNo,
                    'roleDesc': this.form.roleDesc,
                    'roleSort': this.form.roleSort,
                    'permissionIds':this.form.permissionIds
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        })
                        this.$router.push('/queryRoleByCondition')
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            },
            onBack() {
                this.$router.push('/queryRoleByCondition')
            },
            getCheckedKeys() {          // 获取选中的权限id
                this.form.permissionIds = this.$refs.tree.getCheckedKeys()
                this.$refs.tree.getHalfCheckedKeys().forEach(res => {
                    this.form.permissionIds.push(res)
                })
            }
        }
    }
</script>

<style scoped>

</style>
